<template>
	<div class="main balanceWrap">
		<scroller style="height: auto;">
			<div>

				<div style="width: 100%;height: 2.6rem;opacity: 0;"></div>
				<div class="balanceBox" ref="scrollerBottom">
					<div class="accordionWrap" v-for="(item,index) in collData" :key="index">
						<div style="padding: 0 0.3rem;box-sizing: border-box;">
							<div class="blBar11 flex-h" @click="Shrink(index,item)">
								<span class="flex1 sp1">

									<i :class="item.academyType==1?'ii1':item.academyType==2?'ii2':item.academyType==3?'ii3':'ii4'"></i>
									<b>{{item.academyType==1?'冲击院校':item.academyType==2?'稳争院校':item.academyType==3?'稳求院校':'保底院校'}}</b>
									<!-- <em>{{item.state?'收缩':'展开'}}</em> -->
									<em>{{item.reAcademies.length}}选{{item.selectCount}}</em>

								</span>

								<img class="imgIcon" :src="item.state?imgup:imgdown" alt="">


							</div>
						</div>


						<div class="menuOrShow" :style="item.state?'':'height:0px;'" ref="AccordionBody">
							<div style="overflow: hidden;padding-bottom: 0.2rem;">

								<div class="barWrap" v-for="(its,$index) in item.reAcademies" :key='$index+10'>
									<div class="univsbox flex-h" v-on:click='openDetais(its)'>
										<div :class="['unlefts',item.academyType==1?'unlefts1':item.academyType==2?'unlefts2':item.academyType==3?'unlefts3':'unlefts4']">
											<span class="un1">NO.{{$index+1}}</span>
											<span class="un2"><b>{{(its.probability*100).toFixed(0)}}%</b><i>{{its.academyType ==1?'有希望':its.academyType==2?'希望很大':its.academyType==3?'靠谱':'非常靠谱'}}</i></span>
										</div>
										<div class="unright flex1">
											<span class="sch schoolName">{{its.acadNumber}}&nbsp;&nbsp;{{its.acadName }}</span>
											<span class="sch schLine schoolLine2">2018年最低位次 {{its.enrollmentRanking }}</span>
											<span class="sch schLine schoolLine3">2018年实际录取数 {{its.enrollmentCount }}</span>
											<span class="sch schLine schoolLine1">2019年招生计划 {{its.enrollmentPlan}}</span>
											<span class="schoolBtn" @click.stop="majorClick(index,$index,its)">
												<b>专业 {{its.majors.length}}</b>

												<img class="imgIcon" src="~/static/images/school_icon_arrow_down.png" alt="">

											</span>
										</div>
									</div>
									<div class="subjectBoxWrap" :style="its.type?'height:auto':'height:0px'" ref="subjectBody">
										<div style="overflow: hidden;">
											<div class="subjectBox flex-h" v-for="(k,$indexs) in its.majors" :key="$indexs+100" v-on:click.stop="getMajorsCik(k,its.acadCode ,its.enrollmentMark)">
												<div :class="['lefts',,k.majorType==1?'lefts1':k.majorType==2?'lefts2':k.majorType==3?'lefts3':'lefts4']">
													<span>
														<b>{{(k.probability*100).toFixed(0)}}%</b>
														<i>{{k.majorType==1?'冲击':k.majorType==2?'争取':k.majorType==3?'稳求':'保底' }}</i>
													</span>
												</div>
												<div class="rights flex1">
													<span class="r1">{{k.majName}}</span>
													<span class="r2">
														<b>学制{{k.regime}}年</b>
														<b>学评 {{k.majorRank }}</b>
														<b>学费{{k.tuition}}元/年</b>
													</span>
												</div>

											</div>
										</div>

									</div>
								</div>
							</div>
							
								
						</div>
					</div>
					<div class="maskWrap" :style="sreStyle">
							<!-- <div class="maskWrap"> -->
						<div class="hides">

							<span class="sp1" style="width: 1.2rem;height: 1.2rem;display: block;margin: 0 auto;">

								<img class="imgIcon" src="~/static/images/volunteer_icon_lock.png" alt="">
							</span>
							<span class="sp2" style="font-size:0.26rem;font-family:'PingFang-SC-Bold';font-weight:bold;color:rgba(108,191,32,1);line-height:0.37rem;display: block;text-align: center;width: 100%;">马上购买服务，查看完整方案</span>
							<span class="sp3" @click="openVip">点击购买</span>


						</div>
					</div>
				</div>
				<div style="width: 100%;height: 150px;"></div>
			</div>
		</scroller>
	</div>

</template>
<script>
	// import baseInformation from "./Models/baseInformation";
	import 'swiper/dist/css/swiper.css'
	import Swiper from 'swiper/dist/js/swiper.js';
	import ls from 'store2'
	export default {
		components: {

		},
		data() {
			return {
				
				imgup: require('~/static/images/volunteer_icon_allow_up.png'),
				imgdown: require('~/static/images/volunteer_icon_allow_down.png'),
				sreStyle: '',
				tabindex: 0,
				tabindex1: 1,
				tabindex2: 10,
				isShrink: false,
				isshow: 0,
				RightContent: '收缩',
				collData: [],
			
			};
		},
		created() {
			let caseesData = ls.get('caseData' + this.$route.query.type);
			if(caseesData.length==0){
				this.$vux.toast.text('您的生成方案没有对应学校')
				return false;
			} 
			caseesData.forEach(item => {
				item.state = false
				item.reAcademies.forEach(its => {
					its.type = false
				})
			})
			if (caseesData[0].reAcademies.length > 0) {
				caseesData[0].state = true;
				this.sreStyle = 'height:6rem';
			} else if (caseesData[0].reAcademies.length == 0) {
				caseesData[1].state = true;
				this.sreStyle = 'height:4.9rem';
			} else if (caseesData[1].reAcademies.length == 0) {
				caseesData[2].state = true;
				this.sreStyle = 'height:3.8rem';
			} else if (caseesData[2].reAcademies.length == 0) {
				caseesData[3].state = true;
				this.sreStyle = 'height:2.7rem';
			}
			this.collData = caseesData
			console.log('我是组件里面的', caseesData)
		},
		computed: {
			resultCategoryId() {
				return this.tabindex;
			},
			resultCategoryId1() {
				return this.tabindex1;
			},
			resultCategoryId2() {
				return this.tabindex2;
			}

		},
		mounted() {
		
		},
		methods: {
		
			openDetais(ite) {
				this.$emit("btnClick", ite)
				// console.log(ite)
			},
			getMajorsCik(its, index, code) {
				this.$emit("btnMajorClick", its, index, code)
				// console.log('its', its)
			},
			openVip() {
				let url = encodeURIComponent(process.env.workUrl + "/h5-stu-wx/#/volunteer/stepOne")
				this.commonJs.checkCodeVip("sx0010",url,process.env.mallId)		
			},
			courseSwips() {
				var mySwiper = new Swiper("#couSwiper2", {
					// scrollbar: '.swiper-scrollbar',
					direction: 'vertical',
					mousewheelControl: true,
					freeMode: true,
					// observer: true, //修改swiper自己或子元素时，自动初始化swiper
					// observeParents: true, //修改swiper的父元素时，自动初始化swiper
					// grabCursor:true,
					autoHeight: true,
					// autoplayDisableOnInteraction:false,

				});
				// console.log('swipe')
			},
			majorClick(index, $index, its) {
				// alert('付钱啊，付完钱让你看')
				// its.type = !its.type
				this.tabindex1 = $index;
				this.tabindex2 = index;
				let AllHiden1 = this.$refs.subjectBody[$index];
				let eleMoreHeight1 = AllHiden1.childNodes[0].offsetHeight;
				// console.log($index)


			},
			Shrink(index, item) {
				// alert('请付钱')
				let _this = this;
				this.tabindex = index;
				// item.state = !item.state;
				let AllHiden = this.$refs.AccordionBody[index];
				let eleMoreHeight = AllHiden.childNodes[0].offsetHeight;
			}
		}
	};
</script>
<style scoped lang="less">
	.balanceWrap {
		width: 7.5rem;
		min-height: 100vh;
		background: #fff;

		.balanceBox {
			width: 100%;
			// height: auto;
			height: 10.38rem;
			padding: 0.3rem 0rem;
			box-sizing: border-box;
			position: relative;
			// background: yellow;
			.maskWrap {
				// display: none;
				width: 100%;
				position: absolute;
				bottom: 0;
				left: 0;				
				background: #fff;
				filter: alpha(opacity=98);
				/* IE */
				-moz-opacity: 0.98;
				/* 老版Mozilla */
				-khtml-opacity: 0.98;
				/* 老版Safari */
				opacity: 0.98;

				.hides {
			
					width: 98%;
					height: 2.75rem;
					background: url('~/static/images/volunteer_pic_vip_bg.png') no-repeat;
					// background: red;
					background-size: 100% 100%;
					opacity: 1;
					position: relative;
					z-index: 20;
					margin: 0 auto;

					.sp1 {
						width: 1.2rem;
						height: 1.2rem;
						display: block;
						margin: 0 auto;

						.imgIcon {
							width: 1.2rem;
							height: 1.2rem;
						}
					}

					.sp2 {
						font-size: 0.26rem;
						font-family: 'PingFang-SC-Bold';
						font-weight: bold;
						color: rgba(108, 191, 32, 1);
						line-height: 0.37rem;
						display: block;
						text-align: center;
						width: 100%;
					}

					.sp3 {
						display: block;
						width: 1.4rem;
						height: 0.6rem;
						background: rgba(108, 191, 32, 1);
						border-radius: 0.35rem;
						font-size: 0.24rem;
						font-weight: bold;
						color: rgba(255, 255, 255, 1);
						line-height: 0.6rem;
						text-align: center;
						margin: 0.2rem auto 0;
					}

				}

			}
		}
	}

	.zhuantiBox {
		height: auto;
	}

	.accordionWrap {
		width: 100%;
		// min-height: 100vh;
		background: #fff;
		margin-bottom: 0.3rem;

		.blBar11 {
			width: 100%;
			height: 0.8rem;
			background: rgba(250, 250, 250, 1);
			border-radius: 0.1rem;
			padding: 0 0.2rem;
			box-sizing: border-box;

			.sp1 {
				height: 0.8rem;

				i,
				b,
				em {
					display: inline-block;
					vertical-align: middle;
				}

				i {

					width: 0.18rem;
					height: 0.25rem;

					border-radius: 0.09rem;

				}

				.ii1 {
					background: rgba(241, 116, 103, 1);
				}

				.ii2 {
					background: rgba(252, 200, 60, 1);
				}

				.ii3 {
					background: rgba(137, 204, 78, 1);
				}

				.ii4 {
					background: rgba(89, 127, 245, 1);
				}


				b {
					font-size: 0.34rem;

					font-weight: bold;
					color: rgba(34, 34, 34, 1);
					line-height: 0.8rem;
					margin-left: 0.25rem;
				}

				em {
					line-height: 0.8rem;
					margin-left: 0.2rem;
					font-size: 0.3rem;
					font-weight: bold;
					color: rgba(187, 187, 187, 1);

				}

			}

			.imgIcon {
				width: 0.4rem;
				height: 0.4rem;
			}

		}

		.menuOrShow {
			width: 100%;
			height: auto;
			overflow: hidden;
			padding: 0 0.3rem;
			box-sizing: border-box;
			// 哈哈

			position: relative;
			-webkit-transition: all 0.6s;
			-moz-transition: all 0.6s;
			-o-transition: all 0.6s;
			transition: all 0.6s;

			// transition-delay: 0.6s;
			.smBox {
				width: 100%;
				height: auto;
				background: red;
				margin-top: 0.3rem;

				.ssBoxWrap {
					width: 100%;
					overflow: hidden;
					height: auto;
				}
			}

		}

		.menuHei1 {
			height: auto;
		}

		.menuHei2 {
			height: 0;
		}
	}

	.barWrap {
		width: 98%;
		height: auto;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 0px 0.2rem 0px rgba(204, 204, 204, 0.3);
		border-radius: 0.1rem;
		margin: 0.23rem auto 0;

		.univsbox {
			width: 100%;
			height: 2.75rem;

			-webkit-box-align: initial;
			-ms-flex-align: initial;
			align-items: initial;

			.unlefts {
				width: 1.5rem;
				height: 2.75rem;

				.un1 {
					display: block;
					margin-top: 0.25rem;
					width: 100%;
					height: 0.6rem;
					// background: rgba(244, 116, 103, 1);
					border-top-right-radius: 0.3rem;
					border-bottom-right-radius: 0.3rem;
					font-size: 0.34rem;
					font-family: 'DIN-Bold';
					font-weight: bold;
					// color: rgba(255, 255, 255, 1);
					line-height: 0.6rem;
					text-align: center;
				}

				.un2 {
					margin-left: 0.3rem;
					margin-top: 0.25rem;
					display: block;
					width: 1.2rem;
					height: 1.2rem;
					border-radius: 0.19rem;
					border: 1px solid rgba(238, 238, 238, 1);
					padding: 0.1rem 0;
					box-sizing: border-box;

					b,
					i {
						display: block;
						font-family: 'PingFangSC-Semibold';
						font-weight: 600;
						// color: rgba(244, 116, 103, 1);
						text-align: center;
					}

					b {
						height: 0.6rem;
						line-height: 0.6rem;
						font-size: 0.4rem;
					}

					i {
						height: 0.4rem;
						line-height: 0.4rem;
						font-size: 0.26rem;

					}
				}
			}

			.unlefts1 {
				.un1 {
					background: rgba(244, 116, 103, 1);
					color: rgba(255, 255, 255, 1);
				}

				.un2 {

					i,
					b {
						color: rgba(244, 116, 103, 1);
					}
				}
			}

			.unlefts2 {
				.un1 {
					background: rgba(252, 200, 60, 1);
					color: rgba(255, 255, 255, 1);
				}

				.un2 {

					i,
					b {
						color: rgba(252, 200, 60, 1)
					}
				}
			}

			.unlefts3 {
				.un1 {
					background: rgba(137, 204, 78, 1);
					color: rgba(255, 255, 255, 1);
				}

				.un2 {

					i,
					b {
						color: rgba(137, 204, 78, 1);
					}
				}
			}

			.unlefts4 {
				.un1 {
					background: rgba(89, 127, 245, 1);
					color: rgba(255, 255, 255, 1);
				}

				.un2 {

					i,
					b {
						color: rgba(89, 127, 245, 1);
					}
				}
			}

			.unright {
				width: 100%;
				height: 2.75rem;
				padding-left: 0.5rem;
				box-sizing: border-box;
				position: relative;
				

				.sch {
					display: block;
				}

				.schoolName {
					font-size: 0.34rem;
					font-weight: bold;
					color: rgba(34, 34, 34, 1);
					line-height: 0.48rem;
					margin-top: 0.3rem;
					margin-bottom: 0.2rem;
					 overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp:2;
					-webkit-box-orient: vertical;
				}

				.schLine {
					font-size: 0.26rem;
					margin-top: 0.1rem;
					font-weight: 500;
					color: rgba(102, 102, 102, 1);
					line-height: 0.37rem;
				}

				.schoolBtn {
					position: absolute;
					width: 1.5rem;
					height: 0.6rem;
					background: #f7f7fa;
					border: 1px solid #e5e8ed;
					border-radius: 0.3rem;

					line-height: 0.6rem;
					text-align: center;
					right: 0.3rem;
					bottom: 0.41rem;

					b {
						font-size: 0.26rem;
						vertical-align: middle;
						// font-weight: bold;
						color: #666;
					}

					.imgIcon {
						width: 0.4rem;
						height: 0.4rem;
						vertical-align: middle;
					}
				}
			}
		}

		.subjectBoxWrap {
			width: 100%;
			overflow: hidden;
			height: auto;
			padding-bottom: 0.2rem;

			.subjectBox {
				width: 6.3rem;
				height: 1.8rem;
				margin: 0 auto;
				background: #f7f7fa;
				border-radius: 0.1rem;
				margin-top: 0.2rem;
				padding: 0.3rem;
				box-sizing: border-box;

				.lefts {
					width: 1.2rem;
					height: 1.2rem;

					padding: 0.1rem 0;
					box-sizing: border-box;

					span {

						b,
						i {
							display: block;
							font-family: 'PingFangSC-Semibold';
							font-weight: 600;
							// color: rgba(244, 116, 103, 1);
							text-align: center;
						}

						b {
							height: 0.6rem;
							line-height: 0.6rem;
							font-size: 0.4rem;
						}

						i {
							height: 0.4rem;
							line-height: 0.4rem;
							font-size: 0.26rem;

						}
					}

				}

				.lefts1 {
					span {

						i,
						b {
							color: rgba(244, 116, 103, 1);
						}
					}
				}

				.lefts2 {
					span {

						i,
						b {
							color: #fcc83c;
						}
					}
				}

				.lefts3 {
					span {

						i,
						b {
							color: #89cc4e;
						}
					}
				}

				.lefts4 {
					span {

						i,
						b {
							color: #597ff5;
						}
					}
				}

				.rights {
					padding-left: 0.4rem;
					box-sizing: border-box;
					height: 1.2rem;

					span {
						display: block;
						line-height: 0.6rem;
						height: 0.6rem;
					}

					.r1 {
						font-size: 0.26rem;
						font-weight: bold;
						color: rgba(34, 34, 34, 1);
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

					.r2 {
						b {
							font-size: 0.26rem;
							margin-right: 0.2rem;
							font-weight: 500;
							color: rgba(102, 102, 102, 1);

						}
					}
				}
			}
		}
	}
</style>
